<template>
    <div class=" tl pd_20"
        v-loading="load">
        <div class="bor add_con_item bg_write mar_bottom_25">
            <h5>基本信息</h5>
            <el-form :label-position="labelPosition"
                label-width="90px"
                :model="formLabelAlign"
                ref="formLabelAlign">
                <el-form-item label="商品栏目">
                    <el-col :span="14">
                        <el-col :span="24"
                            v-for="(domain, index) in formLabelAlign.domains"
                            :key="index">
                            <el-col :span="7"
                                class="mr">
                                <el-cascader :options="option"
                                    :props="optionProps"
                                    :show-all-levels="false"
                                    change-on-select
                                    style="width:100%"
                                    placeholder="请选择栏目"
                                    @change="handleItemChange"></el-cascader>
                            </el-col>

                            <el-col :span="1"
                                v-if="index == 0">
                                <el-button :loading='$store.state.isLoading'
                                    @click="addDomain"
                                    type="primary"
                                    icon="el-icon-plus"></el-button>
                            </el-col>
                            <el-col :span="1"
                                v-if="index>0">
                                <el-button :loading='$store.state.isLoading'
                                    @click.prevent="removeDomain(domain)"
                                    type="danger"
                                    icon="el-icon-delete"></el-button>
                            </el-col>
                        </el-col>
                    </el-col>
                    <el-col class="lh size_12 sizeColor">
                        <div>PS：选择商品相关分类，点击选择栏目左侧 "[+]" 可增加所属分类选择器，就是指一个产品可以放在多个分类下</div>
                    </el-col>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-col :span="10">
                        <el-input v-model="shopInfo.title"></el-input>
                    </el-col>
                    <el-col class="tc"
                        :span="2">商品副标题</el-col>
                    <el-col :span="10">
                        <el-input v-model="shopInfo.sub_title"></el-input>
                    </el-col>
                    <el-col class="lh size_12 sizeColor pd_top_10">
                        <div>PS：商品名称就是商品的标题部分，建议商品关键词组合为佳，写长点！编号：是对应您的ERP系统的产品编号，将来可用于导入ERP库存</div>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
        <div class="add_con_item bor bg_write mar_bottom_25 clearfix ">
            <h5>图片上传</h5>
            <el-form :label-position="labelPosition"
                label-width="120px"
                :model="shopInfo">
                <!-- <el-form-item label="产品图"> -->
                <el-col :span="24"
                    class="mar_bottom_20">
                    <el-col :span="24">
                        <el-upload class="setZhutu"
                            action="/api/common/upload/index/"
                            list-type="picture-card"
                            :on-success="uploadSuccess"
                            :file-list="fileList"
                            :on-preview="handlePictureCardPreview"
                            :before-remove="beforeRemove"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :close-on-click-modal='false'
                            :visible.sync="dialogVisible">
                            <img width="60%"
                                :src="dialogImageUrl"
                                alt="">
                        </el-dialog>
                    </el-col>
                </el-col>
                <!-- </el-form-item> -->
            </el-form>

        </div>
        <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
            <h5>基本信息</h5>
            <el-form :label-position="labelPosition"
                label-width="120px">
                <el-form-item label="SKU属性选择">
                    <el-col :span="4">
                        <el-select v-model="shopInfo.sku_id"
                            placeholder="请选择">
                            <el-option v-for="item in skuOption"
                                :key="item.title"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="24">
                        <p class="lh2 size_12 sizeColor">PS：商品sku，根据重量将自动计算运费</p>
                    </el-col>
                </el-form-item>
                <div v-if="showSku">
                    <el-form-item label="销售价">
                        <el-col :span="4">
                            <el-input v-model.number="danSku.price"></el-input>
                        </el-col>
                        <el-col class="tr col_label"
                            :span="3">销售成本&nbsp;&nbsp;&nbsp;</el-col>
                        <el-col :span="4">
                            <el-input v-model.number="danSku.cost_price"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品PV值">
                        <el-col :span="4">
                            {{ss}}
                            <el-input :value="$fnc.toFixedZ(danSku.price-danSku.cost_price)">
                            </el-input>
                        </el-col>
                        <el-col class="tr col_label"
                            :span="3">库存&nbsp;&nbsp;&nbsp;</el-col>
                        <el-col :span="4">
                            <el-input v-model="danSku.stock"></el-input>
                        </el-col>
                        <el-col class="tr col_label"
                            :span="3">商品编码&nbsp;&nbsp;&nbsp;</el-col>
                        <el-col :span="4">
                            <el-input v-model="danSku.retailPrice"></el-input>
                        </el-col>
                        <el-col :span="24">
                            <div class="lh2 size_12 sizeColor">PS：商品sku，根据重量将自动计算运费</div>
                        </el-col>

                    </el-form-item>
                    <el-form-item>
                        <el-button :loading='$store.state.isLoading'
                            type="primary"
                            size="medium"
                            @click="showRating =true">编辑会员等级价格</el-button>
                        <el-button :loading='$store.state.isLoading'
                            type="warning"
                            size="medium"
                            @click="showRating =false">收起价格编辑</el-button>
                        <transition name="fade">
                            <el-row class="pd_top_20"
                                v-show="showRating">
                                <el-col :span="24">
                                    <el-table :show-header="false"
                                        :empty-text="' '"
                                        :data="rating"
                                        row-class-name="ruting_tab"
                                        style="width: 100%">
                                        <el-table-column prop="title"
                                            align="center"
                                            label="会员等级"
                                            width="180">
                                        </el-table-column>
                                        <el-table-column width="180">
                                            <template slot-scope="scope">
                                                <el-input v-model="scope.row.price"></el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </transition>
                    </el-form-item>
                </div>
                <div v-else>
                    <el-form-item label="商品规格"
                        class="prod_shop_guige">
                        <el-col :span="24"
                            class="bor pd_10">
                            <el-col :span="24"
                                class="pd_top_10"
                                v-for="(skuItem,index) in skuItemList"
                                :key="index">
                                <el-col :span="24"
                                    class="bor_p"></el-col>
                                <span class="mar_bottom_15 tl">{{skuItem.title}}</span>

                                <el-checkbox-group v-model="checkedCities[index]"
                                    @change="handleCheckedCitiesChange($event,index)"
                                    class="mar_bottom_5">
                                    <el-checkbox v-for="(city,i) in skuItem.z"
                                        :label="city.title"
                                        :key="city.title"
                                        :class="[i==0 ? 'checkFirst' : '']">{{city.title}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-col>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品库存"
                        class="prod_shop_guige">
                        <el-row>
                            <el-col :span="24 "
                                class="bor pd_10">
                                <el-table ref="multipleTable"
                                    :data="shops"
                                    tooltip-effect="dark"
                                    header-row-class-name="head_color"
                                    style="width: 99.9%;"
                                    class="parendd"
                                    @selection-change="handleSelectionChange">
                                    <el-table-column type="selection"
                                        align="center"
                                        min-width="50">
                                    </el-table-column>

                                    <el-table-column v-for="(skuItem,index) in skuItemList"
                                        :key="index"
                                        :label="skuItem.title"
                                        align="center"
                                        min-width="125">
                                        <template slot-scope="scope">
                                            {{scope.row[index]}}
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="销售价"
                                        align="center"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.price"></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="销售成本"
                                        align="center"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.cost_price"></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="库存"
                                        align="center"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.stock"></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="商品编码"
                                        align="center"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.hid"></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="商品PV值"
                                        align="center"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            <!-- {{scope.row.price-scope.row.cost_price}} -->
                                            <el-input
                                                :value="$fnc.toFixedZ(scope.row.price-scope.row.cost_price,2)">
                                            </el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="设置会员价"
                                        class-name="parend"
                                        align="center"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            <el-button :loading='$store.state.isLoading'
                                                size="mini"
                                                @click="getShopsRow(scope.$index,scope.row)">设置
                                            </el-button><!-- class="dioClass"-->
                                            <el-dialog :close-on-click-modal='false'
                                                class="ss"
                                                @close="closeTab"
                                                :modal-append-to-body="false"
                                                :visible.sync="dialogTableVisible">
                                            </el-dialog>
                                            <div class="clearfix dioTab"
                                                v-if="tabIndex===scope.$index">

                                                <div class="clearfix childTabs"
                                                    v-for="(item,index) in scope.row.rating_json"
                                                    :key="index">
                                                    <el-col :span="8">
                                                        {{item.title}}
                                                    </el-col>
                                                    <el-col :span="16">
                                                        <el-input v-model="item.price"></el-input>
                                                    </el-col>
                                                </div>
                                            </div>

                                        </template>

                                    </el-table-column>
                                </el-table>
                                <el-col :span="24"
                                    class="table_bottom">
                                    <el-button :loading='$store.state.isLoading'
                                        type="primary"
                                        @click="batchRating('rating')"
                                        size="mini">批量设置会员价</el-button>
                                    <el-button :loading='$store.state.isLoading'
                                        type="primary"
                                        @click="batchRating('price')"
                                        size="mini">批量设置价格</el-button>
                                    <el-button :loading='$store.state.isLoading'
                                        type="primary"
                                        @click="batchRating('cost_price')"
                                        size="mini">批量设置成本价</el-button>
                                    <el-button :loading='$store.state.isLoading'
                                        type="primary"
                                        @click="batchRating('stock')"
                                        size="mini">批量设置成库存</el-button>
                                </el-col>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </div>

            </el-form>
        </div>
        <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
            <h5>基本信息</h5>
            <ueditor style="    position: relative;z-index: 0;"
                :server-url="UEditorUrl"
                v-model="shopInfo.content"
                :z-index='21'
                ueditor-path='/ueditor/'
                :initial-frame-height='420'
                :auto-height-enabled='false'
                :options='config1'></ueditor>
        </div>
        <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
            <h5>基本信息</h5>
            <el-form :label-position="labelPosition"
                label-width="120px">
                <el-form-item label="虚拟销量">
                    <el-col :span="4">
                        <el-input v-model.number="shopInfo.invent_sale"></el-input>
                    </el-col>
                    <el-col class="tr col_label"
                        :span="3">真实销量&nbsp;&nbsp;&nbsp;</el-col>
                    <el-col :span="4">
                        <el-input v-model.number="shopInfo.real_sale"></el-input>
                    </el-col>
                    <el-col class="tr col_label"
                        :span="3">购物赠送广告劵&nbsp;&nbsp;&nbsp;</el-col>
                    <el-col :span="4">
                        <el-input v-model.number="shopInfo.send_score"></el-input>
                    </el-col>
                    <el-col :span="24">
                        <div class="lh2 size_12 sizeColor">PS：商品sku，根据重量将自动计算运费</div>
                    </el-col>

                </el-form-item>
                <el-form-item label="每天限购">
                    <el-col :span="4">
                        <el-input v-model.number="shopInfo.day_limit_buy"></el-input>
                    </el-col>
                    <el-col class="tr col_label"
                        :span="3">总限购&nbsp;&nbsp;&nbsp;</el-col>
                    <el-col :span="4">
                        <el-input v-model.number="shopInfo.all_limit_buy"></el-input>
                    </el-col>
                    <el-col class="tr col_label"
                        :span="3">产品重量&nbsp;&nbsp;&nbsp;</el-col>
                    <el-col :span="4">
                        <el-input v-model.number="shopInfo.weight"></el-input>
                    </el-col>
                    <el-col :span="4">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-radio v-model="radio"
                            label="KG">KG</el-radio>
                        <el-radio v-model="radio"
                            label="G">G</el-radio>
                    </el-col>
                    <el-col :span="24">
                        <div class="lh2 size_12 sizeColor">PS：商品sku，根据重量将自动计算运费</div>
                    </el-col>
                </el-form-item>
                <el-row>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="6">
                            <p class="size_13 sizeColor_333  bold">是否上架</p>
                            <p class="size_13 sizeColor">关闭后，将不发送短信验证手机号</p>
                        </el-col>
                        <el-col :span="18">
                            <switchc style="font-size:13px;position: relative;top: 22%;"
                                v-model="shopInfo.show"
                                @change="getIskeck($event,'show',)"
                                text="已开启|已关闭"></switchc>
                        </el-col>
                    </el-col>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="6">
                            <p class="size_13 sizeColor_333  bold">是否允许使用优惠券</p>
                            <p class="size_13 sizeColor">开启PC端注册功能后，PC端将可以注册账号</p>
                        </el-col>
                        <el-col :span="18">
                            <switchc style="font-size:13px;position: relative;top: 22%;"
                                v-model="shopInfo.is_coupon"
                                @change="getIskeck($event,'is_coupon',)"
                                text="已开启|已关闭"></switchc>
                        </el-col>
                    </el-col>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="6">
                            <p class="size_13 sizeColor_333  bold">是否需要实名购物</p>
                            <p class="size_13 sizeColor">开启后，登录需用短信验证</p>
                        </el-col>
                        <el-col :span="18">
                            <switchc style="font-size:13px;position: relative;top: 22%;"
                                v-model="shopInfo.is_realname"
                                @change="getIskeck($event,'is_realname',)"
                                text="已开启|已关闭"></switchc>
                        </el-col>
                    </el-col>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="8">
                            <p class="size_13 sizeColor_333  bold">旅游劵抵扣</p>
                            <p class="size_13 sizeColor">取消异常登录短信验证后，您的店铺安全将降低，因此造成的损失后果自负</p>
                        </el-col>
                        <el-col :span="16">
                            <el-col :span="4"
                                class="f_r">
                                <el-input v-model="shopInfo.integral_dk_per"
                                    suffix-icon="el-icon-date"
                                    placeholder="请输入内容"></el-input>
                            </el-col>
                        </el-col>
                    </el-col>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="6">
                            <p class="size_13 sizeColor_333  bold">是否置顶</p>
                            <p class="size_13 sizeColor">选择不需要时，可以提高首次访问速度，但无法取得微信头像和昵称</p>
                        </el-col>
                        <el-col :span="18">
                            <switchc style="font-size:13px;position: relative;top: 22%;"
                                v-model="shopInfo.is_top"
                                @change="getIskeck($event,'is_top',)"
                                text="需要|不需要"></switchc>
                        </el-col>
                    </el-col>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="6">
                            <p class="size_13 sizeColor_333  bold">件数折扣</p>
                            <p class="size_13 sizeColor">开启后，会员下单支付后会有消息提醒</p>
                        </el-col>
                        <el-col :span="18">
                            <el-col :span="4"
                                class="f_r mar_lf_15">
                                <el-input v-model="shopInfo.discount"></el-input>
                            </el-col>
                            <el-col :span="4"
                                class=" f_r">
                                <el-input v-model="shopInfo.discount_number"></el-input>
                            </el-col>
                        </el-col>
                    </el-col>
                    <el-col :span="24"
                        class="bg_f8 pd_10_20 mar_top_15 config">
                        <el-col :span="6">
                            <p class="size_13 sizeColor_333  bold">是否免邮</p>
                            <p class="size_13 sizeColor">关闭后，将不发送短信验证手机号</p>
                        </el-col>
                        <el-col :span="18">
                            <switchc style="font-size:13px;position: relative;top: 22%;"
                                v-model="shopInfo.is_mail"
                                @change="getIskeck($event,'is_mail',)"
                                text="已开启|已关闭"></switchc>
                        </el-col>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <el-button :loading='$store.state.isLoading'
            @click="addProductItem">添加</el-button>
        <!-- 批量设置会员价 -->
        <el-dialog :close-on-click-modal='false'
            :title="bothTitle"
            @close="closeTab"
            width="500px"
            :visible.sync="bothRating">
            <div v-if="showBoth=='rating'">
                <el-table :show-header="false"
                    :empty-text="' '"
                    :data="rating"
                    style="width: 100%">
                    <el-table-column prop="title"
                        align="center"
                        label="会员等级"
                        width="180">
                    </el-table-column>
                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.price"></el-input>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class=""
                v-else-if="showBoth=='price'">
                <el-input v-model="bothPrice"></el-input>
            </div>
            <div class=""
                v-else-if="showBoth=='cost_price'">
                <el-input v-model="bothCost_price"></el-input>
            </div>
            <div class=""
                v-else-if="showBoth=='stock'">
                <el-input v-model="bothStock"></el-input>
            </div>
            <el-row class="">
                <el-col :span="24"
                    class="tc mar_top_20">
                    <el-button :loading='$store.state.isLoading'
                        @click="bothAdd">保存</el-button>
                </el-col>
            </el-row>

        </el-dialog>
    </div>
    <!-- <el-button  :loading='$store.state.isLoading' type="primary" @click="submitForm('formLabelAlign')">提交</el-button> -->
</template>
<script>
import ueditor from "@/components/ueditor/Ueditor.vue";
import IsXuanZe from "@/components/currency/IsXuanze.vue";
import switchc from "@/components/currency/Swich.vue";
export default {
  data() {
    return {
      labelPosition: "right",
      load: false,
      showBoth: "", //显示批量添加dio
      bothTitle: "", //批量添加title
      bothPrice: "", //批量价格
      bothCost_price: "", //批量成本价
      bothStock: "", //批量库存
      dialogVisible: false,
      bothRating: false,
      dialogImageUrl: "",
      show: "block",
      op: [],
      option: [],
      skuOption: [],
      skuItemIndex: 0,
      showRating: false,
      optionProps: {
        value: "id",
        label: "title",
        children: "z"
      },
      optionPropsku: {
        value: "id",
        label: "title"
      },
      title: "",
      skuList: [],
      showSku: true, //是否单SKU
      skuItemList: "",
      formLabelAlign: {
        domains: [{ value0: "", value1: "", value2: "" }] //分类栏目
      },
      danSku: {
        price: "16", //销售价格
        cost_price: "12", //销售成本
        stock: "1", //库存
        rating_json: [],
        iden: "1",
        hid: "1"
      },
      radio: "KG",
      shopInfo: {
        title: "", //商品名称
        cate_id: "", //分类ID
        sku_id: "0", //sku
        sub_title: "",
        sku_json: "", //已选SKU串
        content: "", //内容
        piclink: "", //封面图
        img_json: "", //	上传的商品图片
        invent_sale: "", //	虚拟销量
        real_sale: "", //	真实销量
        send_score: "", //	购物赠送广告劵
        day_limit_buy: "", //	每天限购
        all_limit_buy: "", //	总限购
        weight: "", //	产品重量
        show: "1", //是否上架
        is_coupon: "0", //是否允许使用优惠券
        is_realname: "0", //是否需要实名购物
        integral_dk_per: "", //旅游劵抵扣百分比
        is_top: "", //是否置顶
        discount_number: "", //折扣件数
        discount: "10", //折扣 默认10
        is_mail: "" //是否免邮
      },
      defaultInfo: {
        sku: "0"
      },
      fileList: [],
      checkAll: false,
      checkedCities: [[], [], [], [], [], []],
      shops: [],
      multipleSelection: [],
      rating: [], //会员等级
      UEditorUrl: "",
      config1: {
        initialFrameWidth: "100%:",
        initialFrameHeight: 115,
        wordCount: false,
        initialContent: "",
        toolbars: [["removeformat", "link", "unlink"]]
      },
      showZhuImg: "",
      ss: "",
      show: "",
      tabIndex: "",
      ratingTab: [],
      dialogTableVisible: false,
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    handleItemChange(val) {
      this.shopInfo.cate_id = val[val.length - 1];
    },
    getProductList() {
      var params = {};
      params.parent_id = "";
      this.$api.getShops.getProductCateTreeList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.option = res.data.result;
        }
      });
    },
    getSkuList() {
      var params = {};
      params.parent_id = "0";
      this.$api.getShops.getSkuListTree(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.skuList = res.data.result;
          var op = {
            id: "0",
            title: "单SKU属性"
          };
          res.data.result.unshift(op);
          this.skuOption = res.data.result;
        }
      });
    },
    getRatingList() {
      var params = {};
      params.parent_id = "0";
      this.$api.getUser.getRatingList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.rating = res.data.result;
        }
      });
    },
    addDomain() {
      this.formLabelAlign.domains.push({
        value0: "",
        value1: "",
        value2: "",
        key: Date.now()
      });
    },
    removeDomain(item) {
      var index = this.formLabelAlign.domains.indexOf(item);
      if (index !== -1) {
        this.formLabelAlign.domains.splice(index, 1);
      }
    },
    handleRemove(file, fileList) {
      var id = file.id || "0";
      if (id == "0") {
        this.fileList = fileList;
      } else {
        var params = {};
        params.id = id;
        this.$api.getShops.delImg(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            // this.$fnc.alertSuccess({text:'修改成功'});  //成功弹出框
            this.fileList = fileList;
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定删除吗？`);
    },
    handlePictureCardPreview(file) {
      if (file.id) {
        this.shopInfo.piclink = file.url;
      } else {
        this.shopInfo = file.response.result;
      }
    },
    handleCheckedCitiesChange(value, index) {
      var arr = [];
      this.shops = [];
      var data = [];
      for (var i in this.checkedCities) {
        if (this.checkedCities[i].length > 0) {
          arr.push(this.checkedCities[i]);
        }
      }
      var skuLength = this.skuItemList.length;
      var sum = 0;
      for (var i in this.skuItemList) {
        if (this.skuItemList[i].z) {
          sum += this.skuItemList[i].z.length;
        }
      }
      if (this.shops.length >= sum) {
        return false;
      }
      if (index == skuLength) {
        data = this.$fnc.getComposeByArrays(arr);
      } else if (arr.length >= skuLength) {
        data = this.$fnc.getComposeByArrays(arr);
      }
      if (data.length > 0) {
        var da = [];
        for (var i in data) {
          var params = {};
          for (var j in data[i]) {
            params[j] = data[i][j];
            params.price = "";
            params.cost_price = "";
            params.stock = "";
            params.hid = "";
            params.pv = "";
            params.rating_json = [];
          }
          for (var k in this.rating) {
            var p = {};
            p.title = this.rating[k].title;
            p.id = this.rating[k].id;
            p.price = "";
            params.rating_json.push(p);
          }

          da.push(params);
        }
        this.shops = da;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getShopsRow(index, row) {
      this.tabIndex = index;
      this.dialogTableVisible = true;
    },
    closeTab() {
      this.tabIndex = "";
      this.dialogTableVisible = false;
    },
    uploadSuccess(response, file, fileList) {
      console.log(fileList);
      if (response.code == 200) {
        this.fileList = fileList;
        console.log(this.fileList);
      } else {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    getIskeck(val, i) {
      if (i == "sho") {
        this.shopInfo.show = val;
        return;
      } else if (i == "is_coupon") {
        this.shopInfo.is_coupon = val;
        return;
      } else if (i == "is_realname") {
        this.shopInfo.is_realname = val;
        return;
      } else if (i == "is_top") {
        this.shopInfo.is_top = val;
        return;
      } else if (i == "is_mail") {
        this.shopInfo.is_mail = val;
        return;
      }
    },
    addProductItem() {
      this.load = true;
      var params = {};
      params = this.shopInfo;
      var imgArr = [];
      for (var i in this.fileList) {
        var imgJson = {};
        if (this.fileList[i].response) {
          imgJson.piclink = this.fileList[i].response.result;
        } else {
          imgJson.piclink = this.fileList[i].url;
        }
        imgJson.id = this.fileList[i].id || 0;
        imgArr.push(imgJson);
      }
      params.img_json = JSON.stringify(imgArr);
      if (this.showSku) {
        //单SKU
        // this.danSku.meb=[];
        this.danSku.rating_json = [];
        var men = this.rating;
        for (var i in men) {
          var pa = {};
          pa.rating = men[i].id;
          pa.price = men[i].price || 0;

          this.danSku.rating_json.push(pa);
        }

        var a = [];
        a.push(this.danSku);
        params.sku_json = JSON.stringify(a);
      } else {
        var shop = this.shops;
        var attr = "";
        var arr = [];
        var obj = {};
        var iden = "";

        for (var i in shop) {
          var obj = {};
          var iden = "";
          for (var j in this.skuItemList) {
            if (this.skuItemList[j].z) {
              for (var k in this.skuItemList[j].z) {
                if (shop[i][j] == this.skuItemList[j].z[k].title) {
                  iden += "@" + this.skuItemList[j].z[k].id + "@" + shop[i][j];
                }
                if (
                  attr.indexOf(this.skuItemList[j].z[k].id) < 0 &&
                  shop[i][j] == this.skuItemList[j].z[k].title
                ) {
                  attr += "@" + this.skuItemList[j].z[k].id;
                }
              }
            }
            // obj.iden=iden;
          }
          iden = iden.slice(1);
          obj.rating_json = shop[i].rating_json;
          obj.iden = iden;
          obj.price = shop[i].price;
          obj.cost_price = shop[i].cost_price;
          obj.stock = shop[i].stock;
          arr.push(obj);
        }

        attr = attr.slice(1);
        console.log(arr);
        params.attr = attr;
        params.sku_json = JSON.stringify(arr);
      }

      params.weight = params.weight + this.radio;
      console.log(params);
      if (params.id) {
        this.$api.getShops.updataShopsItem(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      } else {
        this.$api.getShops.addShopsItem(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      }
      this.load = false;
    },
    getUpdataItem() {
      this.load = true;
      var id = this.$store.state.shopItemId;
      var params = { id: id };
      this.$api.getShops.selectShopsItem(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          this.shopInfo = res.data.result;
          var imgList = res.data.result.img_json;
          for (var i in imgList) {
            var imgObj = {};
            imgObj.id = imgList[i].id;
            imgObj.url = this.$fnc.getImgUrl(imgList[i].piclink);
            this.fileList.push(imgObj);
          }
          var skuData = this.shopInfo.sku_json;
          var da = [];
          var arr = [];
          for (var i in skuData) {
            da.push(skuData[i].iden.split("@"));
          }
          for (var i in da) {
            var a = da[i].filter((s, i) => {
              if (i % 2 != 0) {
                return s && s.trim();
              }
            });

            arr.push(a);
          }
          skuData.forEach((el, index) => {
            arr[index].forEach((item, i) => {
              skuData[index][i] = item;
            });
          });
          this.shops = skuData;
          var b = [];
          for (var i in arr) {
            for (var k in arr[i]) {
              if (b[k]) {
                b[k].push(arr[i][k]);
              } else {
                b[k] = [];
                b[k].push(arr[i][k]);
              }
            }
          }
          var c = [];
          for (var i in b) {
            // console.log(this.$fnc.uniq(b[i]));
            c.push(this.$fnc.uniq(b[i]));
          }
          if (c.length > 0) {
            this.checkedCities = c;
          }

          this.load = false;
        } else {
          this.load = false;
        }
      });
    },
    batchRating(str) {
      this.showBoth = str;
      if (str == "rating") {
        this.bothTitle = "设置会员价";
      } else if (str == "price") {
        this.bothTitle = "设置销售价";
      } else if (str == "cost_price") {
        this.bothTitle = "设置成本价";
      } else if ((str == "stock")) {
        this.bothTitle = "设置库存";
      }
      this.bothRating = true;
    },
    bothAdd() {
      console.log(this.multipleSelection);
      // var sezRating=this.multipleSelection;
      var str = this.showBoth;
      this.multipleSelection.forEach(el => {

        if (str == "rating") {
          // el.rating_json=this.rating;
          el.rating_json.forEach((item, i) => {
            console.log(item);
            item.id = this.rating[i].id;
            item.price = this.rating[i].price;
            item.title = this.rating[i].title;
          });
        } else if (str == "price") {
          el.price = this.bothPrice;
        } else if (str == "cost_price") {
          el.cost_price = this.bothCost_price;
        } else if (str == "stork") {
          el.stork = this.bothStock;
        }

        // el.rating_json.forEach(e=>{
        //     console.log(e)
        // })
      });
      // this.shops=sezRating;
      // console.log(sezRating)
      this.bothRating = false;
    }
  },
  mounted() {
    this.load = false;
    // console.log(this.formLabelAlign)
  },
  watch: {
    formLabelAlign(val) {
      // console.log(val)
    },
    "shopInfo.sku_id"(id) {
      this.shopInfo.sku_id = id;
      if (id <= "0") {
        this.showSku = true;
      } else {
        this.showSku = false;
        for (var i in this.skuList) {
          if (id == this.skuList[i].id && this.skuList[i].z != undefined) {
            this.skuItemList = this.skuList[i].z;
            return false;
          }
        }
      }
    },
    skuList(val) {
      if (val && this.$store.state.shopItemId) {
        this.getUpdataItem();
      }
    }
  },
  components: {
    ueditor,
    IsXuanZe,
    switchc
  },
  beforeCreate() {
    this.load = true;
  },
  created() {
    this.getProductList(); //初始化活的商品分类数据
    this.getSkuList(); //初始化活的商品SKU数据
    this.getRatingList();
    this.UEditorUrl = "";

    // console.log(this.shopInfo)
  }
};
</script>


<style lang="less" scoped>
.tag {
  width: 148px;
  color: #fff;
  margin-bottom: 1rem;
  background: #4ca9ff;
  text-align: center;
  border-radius: 3px;
}
.checkFirst {
  margin-left: 1.875rem;
}
.head_color {
  background: #333;
}
.fade-enter-active,
.fade-leave-active {
  transition: height 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
</style>
